import Vue from 'vue'

const app = new Vue({
  // el: '#root',
  template: '<div ref="div">{{text}} {{obj.a}}</div>',
  data: {
    text: 0,
    obj: {}
  }

  // watch: {
  //   text (newText, oldText) {
  //     console.log(`${newText} : ${oldText}`)
  //   }
  // }
})
// el: '#root'相等于创建一个const app = new Vue()，然后用app.$mount('#root')挂载方式
new Vue({
  // el: '#root',
  template: '<div ref="div">{{text}} {{obj.a}}</div>',
  data: {
    text: 0,

  }
})
app.$mount('#root')

let i = 0
setInterval(() => {
  i++
  // 异步渲染-->$nextTick:更新dom节点
  // app.text += 1
  // app.text += 1
  // app.text += 1
  // app.text += 1
  // app.text += 1
  // 1、data内没有定义这个obj的key->a,在页面上是不会进行更新的
  // app.obj.a = i
  // 1、不建议：$forceUpdate则为app.obj.a强制组件重新渲染
  // app.$forceUpdate()
  // 2、第二种方法：给某一个对象的上的某个属性名设置一个新的值。
  app.$set(app.obj, 'a', i)
  // app.$delete 删除对象上的属性
  // app.$options.data.text += 1
  // app.$data.text += 1  // 相等于app.data.text +=1
}, 1000)

// console.log(app.$data)
// console.log(app.$props)
// console.log(app.$el)
// console.log(app.$options)

// 页面打印出'new render function'。
// app.$options.render = (h) => {
//   return h('div', {}, 'new render function')
// }

// app.$root拿到最外层节点，app.$root === app -->true
// console.log(app.$root === app)

// 假设有个组件名为<item></item>,在<item></item>组件添加<item><div></div></item>,app.$children -->拿到的就是<div></div>
// console.log(app.$children)

// 插槽 在template书写调用 可以通过app.$slots引用
// console.log(app.$slots)
// console.log(app.$scopedSlots)

// 快速定位到模板的某个节点或是某个组件 如果是HTML节点会返回HTML节点的对象，如<div ref="div">{{text}} {{obj.a}}</div>，如果是组件则会返回组件的实例，是可操作的vue实例
// console.log(app.$refs)

// 服务端渲染时使用 
// console.log(app.$isServer)

// 实例上的方法$watch、$on、$once(只触发一次)、$emit、$forceUpdate
// const unWatch = app.$watch('text', (newText, oldText) => {
//   console.log(`${newText} : ${oldText}`)
// })
// setTimeout(() => {
//   unWatch()
// }, 2000)

// app.$once('test', (a, b) => {
//   console.log(`test emited ${1} ${b}`)
// })

// setInterval(() => {
//   app.$emit('test', 1, 2)
// }, 1000)

// app.$forceUpdate()
